<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../../css/pages/myData.css" />
</head>

<body>
	<div id="app">
		<div v-if="sate" class="large-icon" @click="sate=false">
			<img :src="filesPath || userDatas.icon || '../../images/user/moren.png'">
		</div>
		<div class="list m-t-15">
			<div class="item" @click="headPortrait">
				<span class="font-c-41">头像</span>
				<div class="item-right m-r-30">
					<img class="photo" @click.stop="sate=true" v-if="userDatas.icon" :src="filesPath || userDatas.icon" />
					<img class="photo"  @click.stop="sate=true" v-else :src="filesPath || '../../images/user/moren.png'" />
				</div>
				<span class="mui-icon mui-icon-arrowright"></span>
			</div>
			<div class="item" @click="modification">
				<span class="font-c-41">昵称</span>
				<div class="item-right font-c-7f m-r-30" v-text="userDatas.periNickname|| '请填写昵称'"></div>
				<span class="mui-icon mui-icon-arrowright"></span>
			</div>
			<div class="item" @click="ModificationGender">
				<span class="font-c-41">性别</span>
				<div class="item-right font-c-7f m-r-30" v-text="userDatas.periSex || '请选择性别'"></div>
				<span class="mui-icon mui-icon-arrowright"></span>
			</div>
			<div class="item">
				<span class="font-c-41">手机号</span>
				<div class="item-right font-c-7f" v-text="userDatas.phoneNumber"></div>
			</div>
		</div>

		<div class="list m-t-15">
			<div class="item">
				<span class="font-c-41">小区</span>
				<div class="item-right font-c-7f" v-text="userDatas.neiName"></div>
			</div>
			<div class="item">
				<span class="font-c-41">门牌号</span>
				<div class="item-right font-c-7f" v-text="userDatas.roomEncode">2803</div>
			</div>
		</div>
		<div v-show="submit"  @click="submitTap" class="save-submit">保存</div>
	</div>

	<script src="../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		window.addEventListener('cropper', function (e) { //执行刷新
			app.filesPath = Util.getState('filesPath')
		});
		
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			GetPersonalInformation()
		})
		
		function GetPersonalInformation() {
			var userID = Util.getState('$state').userID // 获取用户ID
			mui.post(Util.HTTP + 'api/Users/GetPersonalInformation', {
				userID: userID
			}, function (res) {
				if (res.code == 1001) {
					app.userDatas = res.data;
				} else {
					mui.toast(res.message)
				}
			})
		}
		
		var app = new Vue({
			el: "#app",
			data: {
				sate: false,
				submit: false,
				index: 0,
				filesPath: '',
				userDatas: {},
				userSate:false
			},
			watch: {
				userDatas: {
					deep: true,
					handler: function (newVal, oloVal) {
						this.index++
							if (this.index > 1) {
								this.submit = true
								this.userSate = true
							}
					}
				},
				filesPath: {
					handler:function (newVal,oloVal){
						this.submit = true
						plus.nativeUI.showWaiting('上传中', {
							width: '100px',
							height: '100px'
						});
						var userDatas = this.userDatas
						var that = this
						Util.IconUploadProprietor({
							periID: userDatas.periID,
							imgSrc:that.filesPath
						},function(){
							plus.nativeUI.closeWaiting();
						})
					}
				}
					
			},
			methods: {
				headPortrait: function () { // 选择头像方法
					var that = this
					if (mui.os.plus) {
						var a = [{
							title: "拍照"
						}, {
							title: "从手机相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "修改头像",
							cancel: "取消",
							buttons: a
						}, function (b) {
							switch (b.index) {
								case 0:
									break;
								case 1:
									that.getImage()
									break;
								case 2:
									that.galleryImg();
									break;
								default:
									break
							}
						})
					}
				},

				getImage: function () { // 拍照
					var that = this
					Util.Photograph(function (res) {
						that.cutImage(res)
					})
				},
				galleryImg: function () { // 从相册里选择
					var that = this
					Util.OpenPhoto(function (res) {
						that.cutImage(res)
					})
				},
				
				//裁剪图片
				cutImage: function (path) {
					mui.openWindow({
						url: '../../register/cropper.html',
						id: 'cropper',
						extras: {
							path: path,
						},
						show: {
							aniShow: 'zoom-fade-in',
							duration: 800
						},
						waiting: {
							autoShow: true
						}
					});
				},
				ModificationGender: function () { // 修改性别
					var that = this
					plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: [{
								title: "男"
							},
							{
								title: "女"
							},
						]
					}, function (e) {
						if (e.index == 1) {
							that.userDatas.periSex = '男'
						} else if (e.index == 2) {
							that.userDatas.periSex = '女'
						}
					});
				},
				modification: function (item) { // 修改名字
					var that = this;
					plus.nativeUI.prompt("请输入你要修改的名字 ", function (e) {
						if (e.index == 0) that.userDatas.periNickname = e.value
					}, "修改姓名", '', ["确定", "取消"]);
				},
				
				submitTap: function () {
					if(this.userSate){
						this.PostPersonalInformation()
					}
					mui.toast('修改成功')
					setTimeout(function(){
						mui.back()
						var list = plus.webview.currentWebview().opener();
						//触发父页面的自定义事件(refresh),从而进行刷新
						mui.fire(list, 'UpEmployeeInfo');
						//返回true,继续页面关闭逻辑
						return true;
					},1000)
				},
				PostPersonalInformation:function () {
					plus.nativeUI.showWaiting('提交中', {
						width: '100px',
						height: '100px'
					});
					var userDatas = this.userDatas
					var userID = Util.getState('$state').userID // 获取用户ID
					var that = this	
					mui.post(Util.HTTP + 'api/Users/PostPersonalInformation',{
						userID:userID,
						periNickname: userDatas.periNickname,
						periSex: userDatas.periSex
					},function(res){
						if(res.code == 1001){
							plus.nativeUI.closeWaiting();
							mui.toast('修改成功')
							setTimeout(function(){
								mui.back()
								var list = plus.webview.currentWebview().opener();
								//触发父页面的自定义事件(refresh),从而进行刷新
								mui.fire(list, 'UpEmployeeInfo');
								//返回true,继续页面关闭逻辑
								return true;
							},1000)
						}else{
							mui.toast(res.message)
						}
					})
				}
				
			},
			
		})
	</script>
</body>

</html>
